<template>
<div class="common-layout">
    <el-container>
      <el-header>
        <h1>密码重置</h1>
     </el-header>
      <el-main>
          <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
        >
          <el-form-item label="当前密码" prop="mima">
            <el-input v-model="ruleForm.mima" type="password" autocomplete="off" />
          </el-form-item>
          <el-form-item label="新密码" prop="xinmima">
            <el-input v-model="ruleForm.xinmima" type="password" autocomplete="off" />
          </el-form-item>
          <el-form-item label="确定密码" prop="gaimima">
            <el-input v-model="ruleForm.gaimima" type="password" autocomplete="off" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
              提交
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
//引入pinia
import {useUserStore} from '@/stores/token.js';
// 引入提示框
import { ElMessage } from 'element-plus'
import { chuanmima } from '@/api/login.js';
// 引入加密
import CryptoJS from 'crypto-js';
// 计算 MD5 哈希值
const hashPassword = (password) => {
  return CryptoJS.MD5(password).toString();
};

//获取容器对象
const us=useUserStore(); 
//获取容器对象中的数据
console.log(us.denglu); 

// 定义表单数据
const ruleForm = ref({
  mima: '', // 当前密码
  xinmima: '', // 新密码
  gaimima: '', // 确认密码
});

//定义用于校验的表单对象
const ruleFormRef = ref(null)
// 校验规则
const rules=ref({
  xinmima: [
      { required: true, message: '请输入密码', trigger: 'blur' },
       { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
    ],
    gaimima: {
        //自定义规则
        validator(rule, value, callback) {
            if (value === '') {
                callback(new Error('请输入密码'));
            }
            // 校验两次密码是否一致 value 就是确认密码的值
            if(value !== ruleForm.value.xinmima){
                callback(new Error('两次密码不一致'));
            }
            else {
            callback(); // 表示验证通过
            }
        },
        trigger:'blur'
    }
})

//准备参数
const chuan=({
  id:us.denglu.id,
  password:''
})
//向后端传参数
const canshu=async()=>{
    console.log(chuan);
    const res = await chuanmima(chuan)
    console.log(res)
    if(res.code==20011){
        ElMessage({
            message: res.msg,
            type: 'success',
        })
        us.denglu.password=hashPassword(ruleForm.value.xinmima);
    }else{
        ElMessage.error(res.msg)
    }
}

// 提交按钮
const submitForm = (obj) => {
  // 触发obj这个表单的校验规则 如果校验通过 则valid是true  否则是false
  obj.validate((valid) => {
    if (valid) {
      // 对用户输入的当前密码进行 MD5 哈希
      const hashedCurrentPassword = hashPassword(ruleForm.value.mima);

      // 校验当前密码是否正确（假设后端返回的密码是 MD5 哈希值）
      if (hashedCurrentPassword === us.denglu.password) {
        ElMessage({
          message: '校验成功',
          type: 'success',
        });
        chuan.password = ruleForm.value.xinmima;
        canshu();
      } else {
        ElMessage.error('当前密码错误');
      }
    } else {
      ElMessage.error('校验失败');
    }
  });
};


// 重置按钮
const resetForm=(obj)=>{
    obj.resetFields();
}
</script>


<style lang='scss' scoped>
.common-layout{
        border: 2px green solid; 
        width: 1000px;
        height: 600px;
        box-shadow: 0px 0px 5px 5px gainsboro;
    }
.el-header{
    display: flex;
    border-bottom: 2px gainsboro solid;
}
    
</style>